<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
   <head>
      <title>floatz - Test page for subspacers</title>
      <meta http-equiv="content-type" content="text/html; CHARSET=utf-8" />
      <meta http-equiv="content-script-type" content="text/javascript" />
      <meta http-equiv="content-style-type" content="text/css" />
      <meta http-equiv="content-language" content="en" />
      <meta name="author" content="" />
      <meta name="robots" content="index,follow" />
      <meta name="description" content="" />
      <!-- for testing shrinked version -->
      <link rel="stylesheet" type="text/css" href="../../floatz/floatz.fixed.css" />
      <!-- <link rel="stylesheet" type="text/css" href="../../floatz/floatz.liquid.css" /> -->
      <!-- for testing development version -->
      <!-- <link rel="stylesheet" type="text/css" href="../src/floatz.layout.fixed.css" /> -->
      <!-- <link rel="stylesheet" type="text/css" href="../src/floatz.layout.liquid.css" /> -->
      <link rel="stylesheet" type="text/css" href="../src/debug/floatz.layout.debug.css" />
      <style type="text/css">
         h3, p {
            background-color: #fff;
         }
      </style>
   </head>
   <body>
      <!-- page container -->
      <div id="flz_page">
         <h1>Single row / Single column</h1>
         <div class="flz_box">
            <div class="flz_subspacer">
               <h3>flz_subspacer</h3>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
               </p>
            </div>
         </div>

         <h1>Single row / Multi column scenario</h1>
         <div class="flz_box test flz_l33">
            <div class="flz_lsubspacer">
               <h3>flz_lsubspacer</h3>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
               </p>
            </div>
         </div>
         <div class="flz_box test flz_m33">
            <div class="flz_msubspacer">
               <h3>flz_msubspacer</h3>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
               </p>
            </div>
         </div>
         <div class="flz_box test flz_r33">
            <div class="flz_rsubspacer">
               <h3>flz_rsubspacer</h3>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
               </p>
            </div>
         </div>

         <h1>Multi row / Single column scenario (mrsc)</h1>
         <div class="flz_box test">
            <div class="flz_subspacer_mrsc_top">
               <h3>flz_subspacer_mrsc_top</h3>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
               </p>
            </div>
         </div>
         <div class="flz_box test">
            <div class="flz_subspacer_mrsc_mid">
               <h3>flz_subspacer_mrsc_mid</h3>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
               </p>
            </div>
         </div>
         <div class="flz_box test">
            <div class="flz_subspacer_mrsc_bottom">
               <h3>flz_subspacer_mrsc_bottom</h3>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
               </p>
            </div>
         </div>

         <h1>Multi row / Multi column scenario (mrmc)</h1>
         <div class="flz_box test flz_l33">
            <div class="flz_lsubspacer_mrmc_top">
               <h3>flz_lsubspacer_mrmc_top</h3>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
               </p>
            </div>
         </div>
         <div class="flz_box test flz_m33">
            <div class="flz_msubspacer_mrmc_top">
               <h3>flz_msubspacer_mrmc_top</h3>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
               </p>
            </div>
         </div>
         <div class="flz_box test flz_r33">
            <div class="flz_rsubspacer_mrmc_top">
               <h3>flz_rsubspacer_mrmc_top</h3>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
               </p>
            </div>
         </div>
         <div class="flz_box test flz_l33">
            <div class="flz_lsubspacer_mrmc_mid">
               <h3>flz_lsubspacer_mrmc_mid</h3>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
               </p>
            </div>
         </div>
         <div class="flz_box test flz_m33">
            <div class="flz_msubspacer_mrmc_mid">
               <h3>flz_msubspacer_mrmc_mid</h3>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
               </p>
            </div>
         </div>
         <div class="flz_box test flz_r33">
            <div class="flz_rsubspacer_mrmc_mid">
               <h3>flz_rsubspacer_mrmc_mid</h3>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
               </p>
            </div>
         </div>
         <div class="flz_box test flz_l33">
            <div class="flz_lsubspacer_mrmc_bottom">
               <h3>flz_lsubspacer_mrmc_bottom</h3>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
               </p>
            </div>
         </div>
         <div class="flz_box test flz_m33">
            <div class="flz_msubspacer_mrmc_bottom">
               <h3>flz_msubspacer_mrmc_bottom</h3>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
               </p>
            </div>
         </div>
         <div class="flz_box test flz_r33">
            <div class="flz_rsubspacer_mrmc_bottom">
               <h3>flz_rsubspacer_mrmc_bottom</h3>
               <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
               </p>
            </div>
         </div>
      </div>
   </body>
</html>
